<template>
  <div class="content">
    <div class="line">
      <div class="wrap">
        <el-progress
          :text-inside="true"
          :stroke-width="20"
          :percentage="70"
        />
      </div>
      <div class="info">60天内到期设备 90</div>
    </div>
    <div class="line">
      <div class="wrap2">
        <el-progress
          :text-inside="true"
          :stroke-width="20"
          :percentage="30"
        />
      </div>
      <div class="info">已到期设备 30</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content {
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 10%;
    .line {
        margin-bottom: 30px;
        width: 80%;
        .wrap {
            padding: 5px;
            background: #1cc2dc;
            border-radius: 17px;
        }
        .wrap2 {
            padding: 5px;
            background: #403336;
            border-radius: 17px;
        }
        .info {
            margin-top: 12px;
            font-size: 18px;
            font-family: "bigfont";
            color: #ffffff;
        }
        .info {
            margin-top: 12px;
            font-size: 18px;
            font-family: "bigfont";
            color: #00fcff;
        }
    }
}
</style>
